<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3练习2 柱状图  </title>
</head>
<script src="https://cdn.bootcss.com/d3/5.15.1/d3.js">


</script>
<style>
    body {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 14px;
    }

    .bar {
        border: 1px solid #0b3536;
        border-radius: 6px;
        fill: #0098d8;
    }

    #bar .barText {
        fill: #f5faf8;
        font-weight: 500;
    }

    .axisY text,
    .axisX text,
    .headerText text {
        fill: #0b3536;
    }

    #bar svg {
        background-color: #f5faf8;
    }

</style>
<body>
    <div class='container'>
        <div id='bar'></div>
    
    <script>
        const padding = {
    top: 50,
    right: 20,
    bottom: 30,
    left: 30
};
const width = 760 - padding.left - padding.right;
const height = 380 - padding.top - padding.bottom;
const rectPadding = 4; //矩形之间的空白

var svg = d3.select('#bar').append('svg')
    .attr('width', width + padding.left + padding.right)
    .attr('height', height + padding.top + padding.bottom);
 var g = svg.append('g')
    .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')'); 
    g.attr('class', 'headerText')
    .append('text')
    .attr('transform', 'translate(' + (width / 2) + ',' + (-padding.top / 2) + ')')
    .attr('text-anchor', 'middle')
    .attr('font-weight', 600)
    .text('柱状图案例');

   

// 获取y轴的数据
var values = data.map(function (d) {
    return d.value;
});

// 创建X,Y轴比例尺
var xScale = d3.scaleBand().domain(Xdatas).rangeRound([0, width]).padding(0.1),
    yScale = d3.scaleLinear().domain([0, d3.max(values)]).rangeRound([height, 0]);

     // 添加X轴
g.append('g')
    .attr('class', 'axisX')
    .attr('transform', 'translate(0,' + height + ')')
    .call(d3.axisBottom(xScale))
    .attr('font-weight', 'bold');
// 添加Y轴
g.append('g')
    .attr('class', 'axisY')
    .call(d3.axisLeft(yScale).ticks(10));

// 获取x轴的数据
var Xdatas = data.map(function (d) {
    return d.name;
});

var chart = g.selectAll('.bar')
    .data(data)
    .enter().append('g')
// 添加矩形元素
chart.append('rect')
    .attr('class', 'bar')
    .attr('x', function (d) {
        return xScale(d.name);
    })
    .attr('y', function (d) {
        return yScale(d.value);
    })
    .attr('height', function (d) {
        return height - yScale(d.value);
    })
    .attr('width', xScale.bandwidth());
    chart.append('text')
    .attr('class', 'barText')
    .attr('x', function (d) {
        return xScale(d.name);
    })
    .attr('y', function (d) {
        return yScale(d.value);
    })
    .attr('dx', xScale.bandwidth() / 2)
    .attr('dy', 20)
    .attr('text-anchor', 'middle')
    .text(function (d) {
        console.log("d.value", d.value)
        return d.value;
    });
    chart.on('mouseover', function (d) {
    d3.select(this).attr('opacity', 0.7);
})
    .on('mouseout', function (d) {
        d3.select(this)
            .transition()
            .duration(500)
            .attr('opacity', 1)
    }); 
    var data = [{
        name: '赵',
        value: 40
    },
    {
        name: '钱',
        value: 60
    },
    {
        name: '孙',
        value: 70
    },
    {
        name: '李',
        value: 80
    },
    {
        name: '周',
        value: 53
    },
    {
        name: '吴',
        value: 48
    },
    {
        name: '郑',
        value: 42
    },
    {
        name: '王',
        value: 84
    },
    {
        name: '冯',
        value: 87
    },
    {
        name: '陈',
        value: 66
    }
    ];
    </script>
</body>
</html>